<template>
<div class="spot border-bottom">
  <swiper :options="swiperOption">
  <swiper-slide v-for="(page,index) of pages" :key="index">
    <ul>
    <li v-for="item of page" :key="item.id">
      <img :src="item.imgUrl" >
      <p>{{item.name}}</p>
     </li>
    </ul>
  </swiper-slide>
  <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
  <ul class="icon-local border-top">
    <li class="border-right">
      <span class="iconfont">&#xe60a;&nbsp;定位失败</span>
    </li>
    <li>
      <span class="iconfont">&#xe6fd;&nbsp;必游榜单</span>
     </li>
  </ul>
</div>
</template>
<script>
export default {
  name: 'HomeScenic',
  props: {
    clist: Array
  },
  data () {
    return {
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        }
      }
    }
  },
  computed: {
    pages () {
      let arr = []
      this.clist.forEach((obj, index) => {
        let page = Math.floor(index / 8)
        if (!arr[page]) {
          arr[page] = []
        }
        arr[page].push(obj)
      })
      return arr
    }
  }
}
</script>
<style lang="stylus" scoped="scoped">
  .spot >>> .swiper-container
     height 0
     padding-bottom 50%
  .spot
    height 5.2rem
    width 100%
    overflow hidden
  .spot
     li
       width 25%
       float left
       text-align center
       padding-top 0.1875rem
  .spot
   li
    img
     width 1.1rem
     height 1.1rem
   .icon-local
      height 1rem
      li
       float left
       height 1rem
       width 50%
       text-align center
       line-height 1rem
       span
        font-size 0.28rem
</style>
